<template>
  <div class="recruitmentManagement">
    <van-nav-bar title="辞职申请" left-arrow @click-left="$router.back()">
      <template #right>
        <span @click.stop="resign_log">申请记录</span>
      </template>
    </van-nav-bar>

    <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="over_layer">
      <van-cell-group class="layer">
        <van-cell
          @click="goTab(item)"
          v-for="(item, index) in navList"
          :key="index"
          :value="item.text"
          :icon="item.icon"
        />
      </van-cell-group>
    </van-overlay>

    <van-form @submit="jobRsign" ref="formRef">
      <van-field
        autocomplete="off"
        v-model="value1"
        name="value1"
        label="部门"
        placeholder="请输入"
        :rules="[{required: true, message: '请填写'}]"
        required
      />
      <van-field
        autocomplete="off"
        v-model="value2"
        name="value2"
        label="姓名"
        placeholder="请输入"
        :rules="[{required: true, message: '请填写'}]"
        required
      />
      <van-field
        autocomplete="off"
        v-model="value3"
        name="value3"
        label="工号"
        placeholder="请输入"
        :rules="[{required: true, message: '请填写'}]"
        required
      />
      <van-field
        autocomplete="off"
        v-model="value4"
        name="value4"
        label="辞职理由"
        placeholder="请输入"
        :rules="[{required: true, message: '请填写'}]"
        rows="2"
        autosize
        type="textarea"
        required
      />
      <van-field
        autocomplete="off"
        v-model="value5"
        name="value5"
        @click.stop="pickerShow = !pickerShow"
        label="辞职日期"
        placeholder="请输入"
        :rules="[{required: true, message: '请填写'}]"
        required
        readonly
        clickable
      />
      <DebounceSubmitBtn
        :isSubmitBtnDisabled="isSubmitBtnDisabled"
      />
    </van-form>

    <van-popup v-model="pickerShow" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        @confirm="confirmPicker"
        @cancel="pickerShow = false"
      />
    </van-popup>
  </div>
</template>

<script>
import comFilterMenu from '../../../components/comFilterMenu'
import comJobItem from '../../../components/comJobItem'
import {obj} from '../../../constants/comUtils'

import quickMenu from './common/quickMenu'
import lend from '@/assets/img/myCompany/lend.png'
import more from '@/assets/img/myCompany/more.png'
import salary from '@/assets/img/myCompany/salary.png'
import signUp from '@/assets/img/myCompany/signUp.png'
import work from '@/assets/img/myCompany/work.png'
import {reqGetlistsOwner} from '@/api/myCompany.js'
import {Toast, Dialog} from 'vant';

import {mixin_btnStatus} from "../../../mixin/mixin_btn";
import DebounceSubmitBtn from "../../../components/DebounceSubmitBtn";

const rightOptionObj = {
  read: '离职',
  unread: '在职',
  zili: '自离'
}
const rightOption = [
  {text: '在职', value: 'unread'},
  {text: '离职', value: 'read'},
  {text: '自离', value: 'zili'}
]

export default {
  name: 'resign',

  mixins: [mixin_btnStatus],
  components: {
    DebounceSubmitBtn,
  },
  data() {
    return {
      pickerShow: false,
      datetimeShow: false,
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      minDate: new Date(),
      value5: '',
      currentDate: new Date(),
      czstatus: '提交',
      rightValue: 'unread',
      titleName: '报名未读',
      rightOption,
      rightOptionObj,
      showOverlay: false,
      navList: [
        {
          id: 1,
          text: '报名信息',
          icon: signUp
        },
        {
          id: 2,
          text: '工作信息',
          icon: work
        },
        {
          id: 3,
          text: '借支信息',
          icon: lend
        },
        {
          id: 4,
          text: '工资信息',
          icon: salary
        },
        {
          id: 5,
          text: '招聘员工黑名单',
          icon: more
        }
      ],
      needObj: obj,
      needObjTotal: '',
      JobId: '',

      /*
       * quickMenu 组件需要，暂时保留
       * */
      icons: ['fa fa-github', 'fa fa-comment', 'fa fa-code', 'fa fa-envelope'],
      list: [{isLink: false}, {isLink: true, url: '/mime'}, {isLink: true, url: '/'}, {isLink: false}]
    }
  },
  async created() {
    this.value5 = this.$needDateFormat(this.currentDate, 'yyyy-MM-dd')
    Date.prototype.format = function(fmt) {
      var o = {
        'M+': this.getMonth() + 1, //月份
        'd+': this.getDate(), //日
        'h+': this.getHours(), //小时
        'm+': this.getMinutes(), //分
        's+': this.getSeconds(), //秒
        'q+': Math.floor((this.getMonth() + 3) / 3), //季度
        S: this.getMilliseconds() //毫秒
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
        }
      }
      return fmt
    }
    this.JobId = this.$route.query.id
  },

  mounted() {
    // console.log('组件ref对象', this.$refs.formRef);
  },
  methods: {
    confirmPicker(val) {
      console.log('当前', val)
      this.value5 = this.$needDateFormat(val, 'yyyy-MM-dd')
      this.pickerShow = false
    },
    async jobRsign() {
      let userInfo = JSON.parse(localStorage.getItem('userInfo'))
      const {JobId, value1, value2, value3, value4, value5} = this;
      this._updateSubmitBtnStatus();
      const resp = await this.$api.job.sendApplyResign({
        UserId: userInfo.id,
        JobId,
        UserName: value2,
        WorkNumber: value3,
        ResignReason: value4,
        ResignTime: value5,
        Department: value1
      });
      if(resp.code === 200){
        // Toast(resp.data);
        Dialog.confirm({
          title: '操作成功',
          message: `${resp.data}！点击确定，可查看申请记录。`,
          messageAlign: 'left',
        })
          .then(() => {
            // 查看记录
            this.resign_log();
          })
          .catch(() => {
            // on cancel
          });


      }
    },

    //申请记录
    resign_log() {
      let userInfo = JSON.parse(localStorage.getItem('userInfo'))
      this.$router.push({
        path: '/myCompany/resignLog',
        query: {
          userId: userInfo.id,
          jobId: this.JobId
        }
      })
    },

    goNeedPage_recruitStaff(val) {
      const keyWord = 'recruitStaff'
      if (val === 'search') {
        this.$router.push({
          path: `/searchRecords/${keyWord}`
        })
      }
    },
    goTab(data) {
      console.log(data)
      if (data.id == 2) {
        this.$router.push({
          path: '/myCompany/workInfo'
        })
      }
      if (data.id == 3) {
        this.$router.push({
          path: '/myCompany/advaceInfo'
        })
      }
      if (data.id == 4) {
        this.$router.push({
          path: '/myCompany/salary'
        })
      }
    },
    selected($event) {
      console.log('当前点击', $event.item)
    },

    toGetFilterMenuValue_recruitmentManagement(val) {
      console.log('传值---读不读', val)
      this.titleName = this.rightOptionObj[val]
    }
  }
}
</script>

<style lang="scss" scoped>
.recruitmentManagement {
  width: 100%;
  .over_layer {
    margin-top: 46px;
    height: 100%;
    .layer {
      width: 42%;
      font-size: 14px;
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }
  /deep/ .quick_links {
    .nut-fixednav.active .fixed-list {
      right: 0;
    }
    .quick_links_detail {
      .fixed-list {
        right: -110%;
        li {
          min-width: 1.56rem;
          img {
            /*display: none;*/
          }
          span {
            /*border: 1px solid blue;*/
          }
        }
      }
    }
  }
}
</style>
